<template>
  <div style="padding: 0 2px">
    <template v-if="auth === 'edit'">
      <div style="width: 100%" class="ant-select ant-select-enabled ant-select-allow-clear ant-select-enabled" :class="sizeClass">
        <div class="ant-select-selection ant-select-selection--single">
          <div class="ant-select-selection__rendered" @click="showModal">
            <div v-if="showName&&showName.length" :title="showName" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
              {{showName}}</div>
            <div v-else class="ant-select-selection__placeholder" style="display: block; user-select: none;">{{fieldConfig.placeholder}}</div>
          </div>

          <span unselectable="on"
                class="ant-select-arrow"
                v-if="showName&&showName.length"
                @click="clearEvent">
        <i aria-label="图标: down" class="anticon anticon-close-circle ant-input-clear-icon">
          <svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
          </svg>
        </i>
      </span>
        </div>
      </div>
    </template>
    <template v-else>
      <span style="padding: 5px;">
        {{ title || value }}
      </span>
    </template>
    <staff-selector :mode="fieldConfig.dict.split(',')" ref="StaffSelector" :multiple="true" @ok="handleOK" />
  </div>
</template>

<script>
import { createProps } from '@/utils/CommonUtils'
import StaffSelector from '@views/payReimbursement/reimbursement/modoule/StaffSelector'

export default {
  name: 'StaffsField',
  components: { StaffSelector },
  props: {
    fieldConfig: createProps(Object),
    value: {
      type: [Number, String],
      default: undefined
    },
    title: createProps(String),
    auth: createProps(String),
    size: createProps(String, 'default')
  },
  data() {
    return {
      showName: null
    }
  },
  methods: {
    showModal() {
      this.$refs.StaffSelector.open()
    },
    handleOK(list) {
      this.userList = list
    },
    clearEvent() {
      this.userList = null
    }
  },
  computed: {
    sizeClass() {
      if (this.size==='large') return 'ant-select-lg'
      if (this.size==='small') return 'ant-select-sm'
      return ''
    },
    placeholder() {
      if (this.label) return `请选择${this.label}`
      return '请选择用户'
    },
    userList: {
      set(val) {
        if (val) {
          this.showName = val.map(i=>i.name).toString()
          this.$emit('update:value', val.map(i=>i.id).toString())
          this.$emit('update:title', val.map(i=>i.name).toString())
        } else {
          this.$emit('update:value', undefined)
          this.$emit('update:title', undefined)
          this.showName = null
        }
      },
      get() {
        return this.value
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ant-select-arrow {
  display: none;
}
.ant-select:hover {
  .ant-select-arrow{
    display: inherit;
  }
}

</style>